<template>
  <div>
    <ul class="layui-nav layui-nav-tree " lay-filter="test">
      <div class="touxiang1">
        <img
          referrer="no-referrer|origin|unsafe-url"
          class="layui-nav-img user_img img1"
          v-image-preview
          :src="this.$store.getters.getUser.avatar"
          fit="fill"
        />
        <p>{{ this.$store.getters.getUser.username }}</p>
        <el-upload
          style="text-align: center;"
          class="upload-demo"
          ref="upload"
          action="/"
          :on-change="uploadFile"
          :auto-upload="false"
          :show-file-list="false"
        >
          <h3><a>[修改头像]</a></h3>
        </el-upload>
      </div>

      <li index="1" class="layui-nav-item layui-nav-itemed">
        <!-- <router-link class="el-icon-user">个人资料</router-link> -->
        <dl class="layui-nav-child">
          <dd
            :class="
              caidan_type == '/userhome/user_neirong' ||
              caidan_type == '/userhome'
                ? 'layui-this'
                : ''
            "
          >
            <a href="#/userhome/user_neirong">个人主页</a>
          </dd>
          <dd
            :class="caidan_type == '/userhome/user_geren' ? 'layui-this' : ''"
          >
            <a href="#/userhome/user_geren">资料设置</a>
          </dd>
          <dd :class="caidan_type == '/userhome/shezhi' ? 'layui-this' : ''">
            <a href="#/userhome/shezhi">账号设置</a>
          </dd>
        </dl>
      </li>
      <li
        class="layui-nav-item"
        :class="
          caidan_type == '/userhome/user_dindan' ? 'layui-nav-itemed' : ''
        "
      >
        <a href="javascript:;" class="el-icon-tickets">我的订单</a>
        <dl class="layui-nav-child">
          <dd
            :class="caidan_type == '/userhome/user_dindan' ? 'layui-this' : ''"
          >
            <a href="#/userhome/user_dindan">全部订单</a>
          </dd>
          <dd><a href="javascript:;">订单评价</a></dd>
          <dd><a href="javascript:;">订单回收站</a></dd>
          <dd><a href="javascript:;">已完成</a></dd>
        </dl>
      </li>
      <li
        class="layui-nav-item"
        :class="caidan_type == '/userhome/user_dizhi' ? 'layui-this' : ''"
      >
        <a href="#/userhome/user_dizhi" class="el-icon-position">收货地址</a>
      </li>
      <router-link :to="{ path: '/user_gwc' }"
        ><li class="layui-nav-item" >
          <a class="el-icon-shopping-cart-2" href="/user_gwc">我的购物车</a>
        </li></router-link
      >
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // regMobile: /r'^[/userhome/user_dindan]'/,
      userInfo: {},
      caidan_type: "", //修改菜单选中项
      imgUrl: "",
    };
  },
  mounted() {
    //vue使用js渲染dom，layui在加载模块时通过第一次调用模块的render()、init()方法来进行初始渲染，所以当首先加载layui.all.js，后加载vue的app.js时，会出现vue渲染的dom没有被处理的情况，需要在mounted方法里手动渲染
    layui.element.render();
  },
  methods: {
    uploadFile(file) {
      this.imgUrl = file.raw; // 拿到文件的信息

      this.userInfo.avatar = URL.createObjectURL(file.raw);
      this.$store.commit("SET_USERINFO", this.userInfo);

      let formdata = new FormData();
      formdata.append("userId", this.userInfo.userId);
      formdata.append("file", this.imgUrl);
      axios //修改头像
        .post("/fl-user/changeUserAvatar", formdata, {
          headers: {
            "Content-Type": "multipart/form-data",
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          // this.type.type_name = res.data.code;

          // this.$router.go(0);
          if (res.data.code == 200) {
            this.$message("头像修改成功");
          } else {
            this.$message("头像修改失败");
          }
        })
        .catch(function(error) {});
    },

    ifthis() {
      //判断页面

      this.caidan_type = this.$router.currentRoute.fullPath;
    },
  },
  created() {
    this.ifthis();
    this.userInfo = JSON.parse(localStorage.getItem("userInfo")); //将用户信息json字符串转换成JSON类型
  },
  watch: {
    $route: {
      handler(val, oldval) {
        this.caidan_type = val.fullPath; //新路由信息
        if (
          val.fullPath == "/userhome/user_dindan?activeName=0" ||
          val.fullPath == "/userhome/user_dindan?activeName=1" ||
          val.fullPath == "/userhome/user_dindan?activeName=2" ||
          val.fullPath == "/userhome/user_dindan?activeName=3" ||
          val.fullPath == "/userhome/user_dindan?activeName=4"
        ) {
          this.caidan_type = "/userhome/user_dindan";
        } //老路由信息
      },
      // 深度观察监听
      deep: true,
    },
  },
};
</script>

<style scoped>
.layui-nav-tree {
  width: 280px;
  height: 700px;
  float: left;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.touxiang1 {
  width: 280px;
  height: 200px;
  background: #fff;
  color: #c1c2c6;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.touxiang1 .img1 {
  width: 100px;
  height: 100px;
  margin-left: 32%;
  margin-top: 10px;
}
.touxiang1 p,
h3 {
  font-size: 20px;
  text-align: center;
  margin-top: 10px;
}
</style>
